<template>
  <div class="home-view">
    <div>
      <router-view></router-view>
    </div>
    <!-- <ProductList v-bind:products="products"></ProductList> -->
    <div>
      <router-link to="/article">产品</router-link>
      <router-link to="/like">我喜欢</router-link>
      <router-link to="/collection">我的收藏</router-link>
    </div>
  </div>
</template>

<script>
// import ProductList from "@/components/ProductList.vue";

export default {
  name: "HomePage",
  components: {
    // ProductList,
  },
  data() {
    return {
      products: [
        { id: 1, name: "毛衣", price: 90, dec: "毛衣穿着暖和" },
        { id: 1, name: "鞋子", price: 54, dec: "鞋子穿着舒服" },
        { id: 1, name: "裤子", price: 34, dec: "裤子紧的很么" },
        { id: 4, name: "秋衣", price: 43, dec: "秋衣有什么" },
      ],
    };
  },
  created(){
    console.log("created 响应式数据加载完毕")
  },
    mounted(){
    console.log("mounted 页面渲染完了")
  },
  destroyed(){
    console.log("destroyed 页面被销毁了")
  },
  activated(){
    console.log("欢迎来到首页")
    console.log("activated 组件被激活了，即看到页面了")
  },
  deactivated(){
    console.log("deactivated 组件失活了，即看不到页面了")
  }
};
</script>

<style lang="less" scoped>
.home-view {
  width: 300px;
  height: auto;
  /* background-color: red; */
  a {
    margin-left: 10px;
  }
  a.router-link-active {
    background-color: rgb(221, 158, 221);
  }
}
</style>